<template>
  <span v-if="anonymity" :class="styles" class="m-avatar-box anonymity"></span>
  <div v-else :class="styles" class="m-avatar-box">
    <img :src="avatar" class="m-avatar-img" @error="handelError" />
  </div>
</template>

<script>
export default {
  name: 'Avatar',
  props: {
    size: { type: String, default: 'def', validator: val => ['def', 'big', 'nano', 'small', 'tiny'].includes(val) },
    readonly: { type: Boolean, default: false },
    anonymity: { type: Boolean, default: false },
    avatar: { type: String, default: require('@/icons/img/secret.svg') }
  },
  data() {
    return {}
  },
  computed: {
    styles() {
      const sex = ['secret', 'man', 'woman']
      return this.avatar ? [`m-avatar-box-${this.size}`] : [`m-avatar-box-${this.size}`, `m-avatar-box-${sex[0]}`]
    }
  },
  methods: {
    handelError() {
      this.avatar = null
    }
  }
}
</script>

<style lang="less" scoped>
.m-avatar-box {
  &.anonymity {
    background-color: #fff;
  }
}
</style>
